<template>
  <div
    ref="main4"
    id="mai4"
    style="width: 100%; height: 100%; margin: auto"
  ></div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    dataList: {
      type: Array,
    },
  },
  data() {
    return {
      cyqjList: [],
    };
  },

  mounted() {
    this.drawChart();
  },
  methods: {
    // check(val) {
    //   this.cyqjList = val;
    //   this.drawChart();
    // },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main4);
      //职称结构取数

      let that = this;
      let data = this.dataList;
      //   var data = [
      //     {
      //       name: "500万及以下",
      //       value: "50",
      //     },
      //     {
      //       name: "500-1000万",
      //       value: "40",
      //     },
      //     {
      //       name: "1000-5000万",
      //       value: "40",
      //     },
      //     {
      //       name: "5000-10000万",
      //       value: "40",
      //     },
      //     {
      //       name: "10000万以上",
      //       value: "40",
      //     },
      //   ];
      var colorList = [
        "#65E1DF",
        "#35FFBF",
        "#794FF5",
        "#1563FF",
        "#C490BF",
        "#1563FF",
      ];

      //职称结构图表
      var scale = 1;
      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 14,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 14,
          align: "center",
          padding: [15, 10],
        },
        white: {
          color: "#fff",
          align: "center",
          fontSize: 14,
          padding: [0, 0],
        },
        blue: {
          color: "#49dff0",
          fontSize: 14,
          align: "center",
          padding: [5, 0],
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: this.title.substring(0, 2),
          subtext: this.title.substring(2, 4),
          top: "26%",
          textAlign: "center",
          left: "47%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "800",
            color: "#D7F4FF",
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "800",
            margin: 10,
            color: "#D7F4FF",
          },
        },
        backgroundColor: "",
        tooltip: {
          trigger: "item",
        },
        legend: {
          //   type: "scroll",
          top: "160",
          left: "0",
          itemGap: 11,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        series: [
          {
            itemStyle: {
              normal: {
                borderColor: "#003786",
                borderWidth: 5,
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            type: "pie",
            // silent: true, //取消高亮
            radius: ["35%", "65%"],
            center: ["50%", "35%"],
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
              show: false,
              formatter: function (params) {
                // var total = 0; //考生总数量
                // var percent = 0; //考生占比
                // that.cyqjList.getvalue.forEach(function (value, index, array) {
                //   total += value;
                // });
                // percent = ((params.value / total) * 100).toFixed(1);
                // // return params.name + percent + "%";
                // return (
                //   "{white|" +
                //   params.name +
                //   "}{yellow|" +
                //   params.value +
                //   "}\n{hr|}\n{blue|" +
                //   percent +
                //   "%}"
                // );
              },
              rich: rich,
            },
            labelLine: {
              show: true,
              length: 10,
              length2: 0,
              lineStyle: {
                color: "#0b5263",
              },
            },

            data: data,
            z: -1,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
